<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>正在考试,请认真答题</title>

    <link href="/static/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/test.css" rel="stylesheet" type="text/css"/>
<#--<link href="resources/css/iconfont.css" rel="stylesheet" type="text/css"/>-->
    <link rel="stylesheet" href="/static/resources/bootstrap/css/bootstrap.css"/>
<#--<link rel="stylesheet" href="/static/resources/laypage/laypage.css"/>-->
<#--<link rel="stylesheet" href="/static/resources/layui/css/layui.css"/>-->
    <script type="text/javascript" src="/static/resources/js/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="/static/js/laypage/laypage.js"></script>
<#--<script type="text/javascript" src="/static/resources/layui/layui.all.js"></script>-->
    <script type="text/javascript" src="/static/js/vue/vue.min.js"></script>
<#--<script type="text/javascript" src="/static/resources/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>-->
<#--<script type="text/javascript" src="/static/resources/js/jquery.validation/1.14.0/messages_zh.min.js"></script>-->
    <script src="/static/js/jquery/jquery-1.11.3.min.js"></script>
    <script src="/static/js/jquery/jquery.easy-pie-chart.js"></script>
    <!--时间js-->
    <script src="/static/js/jquery/jquery.countdown.js"></script>

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }
    </style>

</head>
<body>
<div class="main" id="app">
    <div class="test_main">
        <div style="float: right; left: 800px;">
            <div class="nr_rt_main">
                <div class="rt_nr1">
                    <div class="rt_nr1_title">
                        <h1>
                            <i class="icon iconfont">&#xe692;</i>答题卡
                        </h1>
                        <p class="test_time">
                            <i class="icon iconfont">&#xe6fb;</i><b class="alt-1">${(mapInfo.examPaper.duration - mapInfo.examPaper.duration%60)/60}:${mapInfo.examPaper.duration%60}</b>
                        </p>
                    </div>

                    <div v-if="${mapInfo.examPaper.questionCount} >0">
                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>单选题</h2>
                                <p>
                                    <span>共</span><i class="content_lit">${mapInfo.examPaper.questionCount!}</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>
                                    <li v-for="(item,index) in questionResult"><a
                                            v-bind:href="'#qu_0_'+index">{{index+1}}</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div v-if="${mapInfo.examPaper.judgmentQuestionCount} > 0">
                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>判断题</h2>
                                <p>
                                    <span>共</span><i class="content_lit">${mapInfo.examPaper.judgmentQuestionCount}</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>
                                    <li v-for="(item,index) in judgmentQuestionResult"><a v-bind:href="'#qu_1_'+index">{{index+1}}</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="margin: 0 auto; width: 1200px;">
        <div class="test">
            <form action="" method="post">
                <div class="test_title">
                    <p class="test_time">
                        <i class="icon iconfont">&#xe6fb;</i><b
                            class="alt-1">${(mapInfo.examPaper.duration - mapInfo.examPaper.duration%60)/60}
                        :${mapInfo.examPaper.duration%60}</b>
                    </p>
                </div>

                <div class="test_content">
                    <div v-if="${mapInfo.examPaper.questionCount} > 0">
                        <div class="test_content_title">
                            <h2>单选题</h2>
                            <p>
                                <span>共</span><i
                                    class="content_lit">${mapInfo.examPaper.questionCount!}</i><span>题，</span><span>合计</span><i
                                    class="content_fs">${mapInfo.examPaper.chooseQuestionTotalPoint!}</i><span>分</span>
                            </p>
                        </div>
                        <div class="test_content_nr">
                            <ul>
                                <li v-for="(item,index) in questionResult" v-bind:id="'qu_0_'+index">
                                    <div class="test_content_nr_tt">
                                        <i>{{index+1}}</i><span>{{item.name}}（ ）?</span>
                                    </div>
                                    <div class="test_content_nr_main">
                                        <ul>
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" v-bind:name="'answer'+(index+1)"
                                                       v-bind:id="'0_answer_'+(index+1)+'_option_1'"/>
                                                <label v-bind:for="'0_answer_'+(index+1)+'_option_1'" class="qqqq" @click="getInfo(item.id, 'A')">
                                                    A.
                                                    <p class=" ue" style="display: inline;">{{item.a}}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" v-bind:name="'answer'+(index+1)"
                                                       v-bind:id="'0_answer_'+(index+1)+'_option_2'"/>
                                                <label v-bind:for="'0_answer_'+(index+1)+'_option_2'" class="qqqq" @click="getInfo(item.id, 'B')">
                                                    B.
                                                    <p class=" ue" style="display: inline;">{{item.b}}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" v-bind:name="'answer'+(index+1)"
                                                       v-bind:id="'0_answer_'+(index+1)+'_option_3'"/>
                                                <label v-bind:for="'0_answer_'+(index+1)+'_option_3'" class="qqqq" @click="getInfo(item.id, 'C')">
                                                    C.
                                                    <p class=" ue" style="display: inline;">{{item.c}}</p>
                                                </label>
                                            </li>
                                            <li class="option">
                                                <input type="radio" class="radioOrCheck" v-bind:name="'answer'+(index+1)"
                                                       v-bind:id="'0_answer_'+(index+1)+'_option_4'"/>
                                                <label v-bind:for="'0_answer_'+(index+1)+'_option_4'" class="qqqq" @click="getInfo(item.id, 'D')">
                                                    D.
                                                    <p class=" ue" style="display: inline;">{{item.d}}</p>
                                                </label>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div v-if="${mapInfo.examPaper.judgmentQuestionCount} > 0">
                    <div class="test_content">
                        <div class="test_content_title">
                            <h2>判断题</h2>
                            <p>
                                <span>共</span><i
                                    class="content_lit">${mapInfo.examPaper.judgmentQuestionCount}</i><span>题，</span><span>合计</span><i
                                    class="content_fs">${mapInfo.examPaper.judgmentQuestionTotalPoint!}</i><span>分</span>
                            </p>
                        </div>
                    </div>
                    <div class="test_content_nr">
                        <ul>

                            <li v-for="(item,index) in judgmentQuestionResult" v-bind:id="'qu_1_'+index">
                                <div class="test_content_nr_tt">
                                    <i>{{index+1}}</i><font>{{item.name}}()?</font><b class="icon iconfont">&#xe881;</b>
                                </div>

                                <div class="test_content_nr_main">
                                    <ul>
                                        <li class="option">
                                            <input type="radio" class="radioOrCheck"
                                                   v-bind:name="'judgmentAnswer'+(index+1)"
                                                   v-bind:id="'1_answer_'+(index+1)+'_option_1'" />
                                            <label v-bind:for="'1_answer_'+(index+1)+'_option_1'" class="qqqq"  @click="getInfo2(item.id, 'T')">
                                                正确.
                                                <p class="ue" style="display: inline;">{{item.a}}</p>
                                            </label>
                                        </li>
                                        <li class="option">
                                            <input type="radio" class="radioOrCheck"
                                                   v-bind:name="'judgmentAnswer'+(index+1)"
                                                   v-bind:id="'1_answer_'+(index+1)+'_option_2'"  />
                                            <label v-bind:for="'1_answer_'+(index+1)+'_option_2'" class="qqqq"  @click="getInfo2(item.id, 'F')">
                                                错误.
                                                <p class="ue" style="display: inline;">{{item.b}}</p>
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="test_title">
        <a><input type="button" name="test_jiaojuan" value="提交试卷" id="subPaper"></a>
    </div>
</div>
<script>
    //vue使用
    var app = new Vue({
        el: "#app",
        data: {
            questionResult: [],
            judgmentQuestionResult :[]
        }
    });

    function getExamPaperQuestions() {
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: '/ExamPage/getExamPaperAndItsQuestions',
            data: {
                examPaperId:${mapInfo.examPaper.id}
            },
            success: function (data) {
                console.log(data);
                app.questionResult = data.questionList;
                app.judgmentQuestionResult = data.judgmentQuestionList;
            },
            error: function () {
                alert("试题获取失败")
            }
        })
    }

    $(function () {
        getExamPaperQuestions();
    });

    window.jQuery(function ($) {
        "use strict";

        $('time').countDown({
            with_separators: false
        });
        $('.alt-1').countDown({
            css_class: 'countdown-alt-1'
        });
        $('.alt-2').countDown({
            css_class: 'countdown-alt-2'
        });

    });


    $(function () {
        $('div').delegate("li .qqqq", "click", function () {
            //debugger;
            var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
            var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
            // 设置已答题
            if (!cardLi.hasClass('hasBeenAnswer')) {
                cardLi.addClass('hasBeenAnswer');
            }

        });
    });

    var list = new Array();
    var list2 = new Array();

    //选项点击事件,将试题id和选项存入数组
    var getInfo = function (id, answer) {
        var v = id + ":" + answer;
        for (i = 0; i < list.length; i++) {
            var tmp = new Array();
            tmp = list[i].split(":");
            if (tmp[0] == id) {
                list.splice(i);
            }
        }
        list.push(v);
    };

    var getInfo2 = function (id, answer) {
        var v = id + ":" + answer;
        for (i = 0; i < list2.length; i++) {
            var tmp = new Array();
            tmp = list2[i].split(":");
            if (tmp[0] == id) {
                list2.splice(i);
            }
        }
        list2.push(v);
    };

    $("#subPaper").click(function () {
        submit();
    });

    //提交试卷
    var submit = function () {
        console.log(list);
        $.ajax({
            type: "POST",
            url: "/ExamPage/subExamPage",
            data: {
                examId: ${mapInfo.examId},
                questions: list.toString(),
                judgments: list2.toString(),
                examPaperId: ${mapInfo.examPaper.id},
                totalPoint: ${mapInfo.examPaper.totalPoint}
            },
            success: function (data) {
                if (data.type === 1) {
                    location.href = "/exam";
                } else if (data.type === 2) {
                    alert("你的分数是: " + data.point);
                    location.href = "/exam";
                } else {
                    alert("失败");
                }
            }, error: function () {
                alert("异常");
            }
        });
    }
</script>
</body>
</html>

